<template>
	<view class="bg">
		<view class="top">
			<image src="./top.png" class="top-img" mode="widthFix"></image>
			<view class="top-body">
				<view class="top-body-title">
					公益活动
				</view>
				<image src="./banner.png" class="top-body-image"></image>
			</view>
		</view>
		<view class="bottom">
			<image src="./bottom.png" class="bottom-img" mode="widthFix"></image>
		</view>
		<view style="position: relative;z-index: 1;">
			<store ref="store" @changeStore='checked' :storeType="1"></store>
		</view>
		
	</view>
</template>

<script>
	import store from '@/components/homeIndex/store';

	import {
		mapGetters
	} from "vuex";
	// import cookie from "@/utils/store/cookie";
	const LONGITUDE = "user_longitude";
	const LATITUDE = "user_latitude";
	const MAPKEY = "mapKey";
	export default {
		name: "storeList",
		components: {
			store,
		},
		// computed: mapGetters(["goName"]),
		data() {
			return {
				page: 1,
				limit: 20,
				loaded: false,
				loading: false,
				storeList: [],
				system_store: {},
				// mapKey: cookie.get(MAPKEY),
				locationShow: false,
				user_latitude: 0,
				user_longitude: 0,
				jzFlg: 0,
			};
		},
		onLoad(option) {
			if(option.jzFlg) {
				this.jzFlg = option.jzFlg
			}
		},
		mounted() {
			
		},
		methods: {
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
				});
			},
			selfLocation() {
				let self = this
				// #ifdef H5
				if (self.$wechat.isWeixin()) {
					self.$wechat.location().then(res => {
						this.user_latitude = res.latitude;
						this.user_longitude = res.longitude;
						uni.setStorageSync('user_latitude', res.latitude);
						uni.setStorageSync('user_longitude', res.longitude);
						self.getList();
					})
				} else {
				// #endif	
					uni.getLocation({
						type: 'wgs84',
						success: (res) => {
							try {
								this.user_latitude = res.latitude;
								this.user_longitude = res.longitude;
								uni.setStorageSync('user_latitude', res.latitude);
								uni.setStorageSync('user_longitude', res.longitude);
							} catch {}
							self.getList();
						},
						complete: function() {
							self.getList();
						}
					});
					// #ifdef H5	
				}
				// #endif
			},
			showMaoLocation(e) {
				let self = this;
				// #ifdef H5
				if (self.$wechat.isWeixin()) {
					self.$wechat.seeLocation({
						latitude: Number(e.latitude),
						longitude: Number(e.longitude)
					}).then(res => {
						console.log('success');
					})
				} else {
					// #endif	
					uni.openLocation({
						latitude: Number(e.latitude),
						longitude: Number(e.longitude),
						name: e.name,
						address: `${e.address}-${e.detailedAddress}`,
						success: function() {
							console.log('success');
						}
					});
					// #ifdef H5	
				}
				// #endif
			},
			// 选中门店
			checked(e) {
				uni.navigateTo({
					url: '/pages/goods/goods_details_store/detail?id='+ e.address.id
				})
				
			},
			// 获取门店列表数据
			getList: function() {
				if (this.loading || this.loaded) return;
				this.loading = true;
				let data = {
					latitude: this.user_latitude || "", //纬度
					longitude: this.user_longitude || "", //经度
					page: this.page,
					limit: this.limit
				};
				storeListApi(data)
					.then(res => {
						this.loading = false;
						this.loaded = res.data.list.length < this.limit;
						this.storeList.push.apply(this.storeList, res.data.list);
						this.page = this.page + 1;
					})
					.catch(err => {
						this.$dialog.error(err);
					});
			}
		},
		onReachBottom() {
			this.$refs.store.getList()
		}
	};
</script>

<style>
	.bottom{
		position: fixed;
		right: 0%;
		left: 0%;
		bottom: 0%;
		z-index: 0;
	}
	.bottom-img{
		width: 100%;
	}
	.top{
		position: relative;
		margin-bottom: 105rpx;
	}
	.top-body-image{
		width: 650rpx;
		height: 360rpx;
	}
	.top-body-title{
		height: 104rpx;
		font-size: 32rpx;
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.top-body{
		margin: 0 30rpx;
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 0 20rpx;
		position: absolute;
		top: 362rpx;
	}
	.top-img{
		width: 100%;
	}
	.bg{
		background-color: #FFF9F2;
		padding-bottom: 40rpx;
	}
	.geoPage {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		z-index: 10000;
	}

	.storeBox {
		width: 100%;
		background-color: #fff;
		padding: 0 30rpx;
	}

	.storeBox-box {
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;
		padding: 23rpx 0;
		justify-content: space-between;
		border-bottom: 1px solid #eee;
	}

	.store-cent {
		display: flex;
		align-items: center;
		width: 80%;
	}

	.store-cent-left {
		width: 45%;
	}

	.store-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 6rpx;
		margin-right: 22rpx;
	}

	.store-img img {
		width: 100%;
		height: 100%;
	}

	.store-name {
		color: #282828;
		font-size: 30rpx;
		margin-bottom: 22rpx;
		font-weight: 800;
	}

	.store-address {
		color: #666666;
		font-size: 24rpx;
	}

	.store-phone {
		width: 50rpx;
		height: 50rpx;
		color: #fff;
		border-radius: 50%;
		display: block;
		text-align: center;
		line-height: 48rpx;
		background-color: #e83323;
		margin-bottom: 22rpx;
		text-decoration: none;
	}

	.store-distance {
		font-size: 22rpx;
		color: #e83323;
	}

	.iconfont {
		font-size: 20rpx;
	}

	.row-right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		width: 33.5%;
	}
</style>
